<template>
	<div class="container-wrapper">
		<k-header headTitle="背景调查" goBack="true"></k-header>
		<div :class="headIos?'archieve_containerr-ios':'entry_contentt'">
			<divider class="choose-type">请选择授权方式</divider>
			<checker selected-item-class="item-selected"  v-model="choose_reg" default-item-class="default-reg">
				<checker-item value="SMSNOTICE" @on-item-click="showMessage">
					<div class="auth_method">
						<div class="auth_method_img">
							<img src="../../assets/img/reference/improvemessage.png"/>
						</div>
						<div class="auth_method_title">短信授权</div>
						<div class="auth_method_content">发送带有授权链接</div>
						<div class="auth_method_content">的短信，由被调查对象授权</div>
					</div>
				</checker-item>
				<checker-item value="WARRANT" @on-item-click="showPhoto">
					<div class="auth_method">
						<div class="auth_method_img">
							<img src="../../assets/img/reference/improveimg.png"/>
						</div>
						<div class="auth_method_title">授权书授权</div>
						<div class="auth_method_content">请上传背调对象亲笔</div>
						<div class="auth_method_content">签名的授权书</div>
					</div>
				</checker-item>
			</checker>
			<div class="show_message show_messheight" v-if="!showmessage">
				<input 
				type="file" 
				class="profileinfopanel-upload"
				ref="inputer"
				id="workupload"
				name="uploadFile"
				@change="uploadAvatar"
				>
				<div class="add_photo">
					<img src="../../assets/img/reference/addphoto.png"/>
				</div>
				<div class="add_text">照片上传</div>
				<img :src="dataUrl" alt="" class="previewadd">
			</div>
			<div class="show_message show_border" v-if="showmessage">
				<div class="add_message">
					<div class="add_message_text">示例：<br>亲爱的<span>{{name}}</span>您好，<span>{{campanyName}}</span>正在通过第三方背调平台萝卜猎手对您进行资料核实，点击以下链接进行授权[http://adf.com]，请在24小时内处理。</div>
				</div>
			</div>
			<div class="auth_leave">（当前可用余额：￥<span>{{totalAmount}}</span>元）</div>
			<button :disabled="authpay" @click="_authpay" class="auth_pay">本次支付：¥ <span>{{totalGoodsPrice}}</span>元</button>
			<boxconfirm :content_title="leave_Msg" content_confirm="余额支付" content_cancel="在线支付" ref="boxconfirm" @confirmClick="balancePay" @cancelClick="onlinePay"></boxconfirm>
			<boxconfirm :content_title="leave_Msg" content_confirm="去充值" content_cancel="在线支付" ref="chargeMoney" @confirmClick="queding" @cancelClick="onlinePay"></boxconfirm>
			<boxconfirm :content_title="leave_Msg" content_confirm="去充值" content_cancel="在线支付" ref="memberMoney" @confirmClick="toastConfirm" @cancelClick="onlinePay"></boxconfirm>
			<boxconfirm content_title="余额不足" content_confirm="充值" content_cancel="取消" ref="bbbboxconfirm"></boxconfirm>
			<boxconfirm content_title="系统繁忙，请稍后再试。" content_confirm="确定" content_cancel="取消" ref="bboxconfirm"></boxconfirm>
			<boxconfirm :content_title="errorMsg" content_confirm="确定" content_cancel="取消" ref="bbboxconfirm"></boxconfirm>
			<div v-show="show_success" @click="hide_success" class="shadow">
					<img src="../../assets/img/reference/applysuccess.png" alt="">
			</div>
			<toast v-model="showPositionValue" type="text" width="100%" :time="1800" is-show-mask text="当前权限无法充值，请联系管理员调配可用额度" position="bottom"></toast>
			<alertbox content_img="../static/commonImg/success.png" :content_l="content_l" ref="alertbox" :content_c="totalGoodsPrice" @sunccessClick="golist" :content_r="content_r"></alertbox>
		</div>
	</div>
</template>

<script>
	import kHeader from '../common/head';
	import boxconfirm from '../common/boxconfirm';
	import alertbox from '../common/alertbox';
	import util from '../../libs/util';
	import EXIF from '../../libs/exif';
	import { Toast, Checker, CheckerItem, Divider,Confirm, TransferDomDirective as TransferDom} from 'vux';
	export default {
		components:{
			kHeader,
			Checker,
			CheckerItem,
			Divider,
			Confirm,
			boxconfirm,
			alertbox,
			Toast
		},
		data (){
			return{
				choose_reg:'SMSNOTICE',
				showmessage:true,
				authpay:false,
				show_confirm:true,
				campanyName:'',
				goodsList:'',
				idCard:'',
				isNewReport:'',
				mobile:'',
				name:'',
				sourceType:'',
				totalAmount:'',
				totalGoodsPrice:'',
				secretFilesInfoId:'',
				isAdmin:'',
				id:'',
				content_l:'支付成功，已冻结',
				content_r:'（元）余额',
				errorMsg:'',
				show_success:false,
				headIos:false,
				leave_Msg:'',
				showPositionValue:false,
				dataUrl:'',//照片
				file:[],
				canvas: '',
				ctx: '',
				massg: '',
				photosucc: false,//判断照片是否上传成功
				photoUrl:''
			}
		},
		mounted(){
		},
		computed: {
			users () {
		      const users = this.$route.query.name
		      return users;
		    }
		},
		created() {
			if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
				this.headIos = true
			} else {
				this.headIos = false
			};
			this.axIos();
		},
		
		methods:{
			showMessage : function(){
				this.showmessage=true;
			},
			toastConfirm:function(){
				this.showPositionValue=true;
			},
			showPhoto : function(){
				this.showmessage=false;
			},
			_authpay:function(){
				// this.$refs.boxconfirm.show();
				var that =this;
				that.authpay=true;
				var url ='/lblsapp-h5/v2/report/reportsub.json';
				if(this.sourceType =='SMSNOTICE'){
					var data ={name:this.name,idCard:this.idCard,mobile:this.mobile,goodsList:this.goodsList,sourceType:this.sourceType,reportAuthType:this.choose_reg,secretFilesInfoId:this.secretFilesInfoId};
				}else{
					var data = { name: this.name, zxsqPhoto:this.photoUrl, idCard: this.idCard, mobile: this.mobile, goodsList: this.goodsList, sourceType: this.sourceType, reportAuthType: this.choose_reg, secretFilesInfoId: this.secretFilesInfoId };
				}
				util.ajax.post(url,data).then(function(data){
					if(data.data.code==='0'){
						var isright = JSON.parse(data.data.res.msg).status==='2';
						that.id=JSON.parse(data.data.res.msg).id;
						if(isright){
							that.content_l ='版本抵扣成功';
							that.totalGoodsPrice='';
							that.content_r='';
							that.$refs.alertbox.show();
						}else{
							that.authpay = false;
							if(that.totalAmount < that.totalGoodsPrice){
								if(that.isAdmin == '1'){
									//管理员 余额不够
									that.$refs.chargeMoney.show();
								}else{
									//子账户管理
									that.$refs.memberMoney.show();
								}
							}else{
								//余额足够
								that.$refs.boxconfirm.show();
							}
						}
					}else{
						that.$refs.bboxconfirm.show();
						that.authpay=false;
					}
				}).catch(function(error){
					that.$refs.bboxconfirm.show();
					that.authpay=false;
		    })
			},
			queding:function(){
				this.$router.push({path:'/userRecharge'})
			},
			hide_success(){
				this.show_success = false;
				this.$router.push({ path: '/archivecenter' });
			},
			//在线支付
			onlinePay:function(){
				var that = this;
				var url = '/lblsapp-h5/v2/order/reportOrdersub.json';
				let data = { goodsList: that.goodsList, reqReportId: that.id, secretFilesInfoId: that.secretFilesInfoId};
				if (that.totalGoodsPrice >= 0 && that.totalGoodsPrice <= 10000) { //判断永辉充值金额验证
					data.price = that.totalGoodsPrice;
					data.type = 1;
					util.ajax.post(url, data).then(function(stats) {
						var interfaces = stats.data.res.data;
						that.$router.push({ path: '/newPay', query: { donot: interfaces.outTradeNo } });
						// window.location.href = 'http://wx.innjia.com/h5v2/shouyintai/yuxiaoerpay/WEB-INF/views/default/checkstand164.html?outTradeNo='+ ;
					}).catch(function(error) {
						console.log(error)
					})
				}
			},
			//余额支付
			balancePay:function(){
				var url = '/lblsapp-h5/v2/report/updateReqCreditReportByBalancePay.json';
				var that = this;
				let data = { client: 'NEWH5', goodsList: this.goodsList, reqReportId: this.id, secretFilesInfoId: this.secretFilesInfoId };
				util.ajax.post(url, data).then(function(data) {		
					if (data.data.code === '0') {
						that.show_success = true;
					} else {
						that.errorMsg = data.data.res.msg;
						that.$refs.bbboxconfirm.show();
						that.authpay = false;
					}
				}).catch(function(error) {
					that.$refs.bboxconfirm.show();
					that.authpay = false;
				})
			},
			axIos(){
				var that = this;
				var url = '/lblsapp-h5/v2/report/updateAuthTypeForReqCreditReport.json';
				util.ajax.post(url).then(function(data){
					if(data.data.code==='0'){
						let datas=data.data.res.data;
						that.campanyName=datas.campanyName;
						that.goodsList=datas.goodsList;
						that.idCard=datas.idCard;
						that.isNewReport=datas.isNewReport;
						that.mobile=datas.mobile;
						that.name=datas.name;
						that.isAdmin = datas.isManager;
						that.sourceType=datas.sourceType;
						that.totalAmount=datas.totalAmount;
						that.totalGoodsPrice=datas.totalGoodsPrice;
						that.leave_Msg='当前背调需要支付 ￥'+that.totalGoodsPrice+'元可用余额￥' +that.totalAmount+'元';
						if(datas.secretFilesInfoId){
							that.secretFilesInfoId = datas.secretFilesInfoId;
						}
					}else{
						that.show_erroe=true;
					}
				}).catch(function(error){
					that.show_erroe=true;
				})
			},
			golist(){
				this.$router.push({ path: '/archivecenter'})
			},
			//图片上传
			uploadAvatar(){
				var that = this;
				var inpt = document.getElementById('workupload');
				var reader = new FileReader();
				let sdata = {};
				this.file = inpt.files[0];
				let str = this.file.name;
				let reg =  /(.*)\.([^\.]+)/g;
				let regt =  /(-*)\-([^\-]+)/g;
				let strs = str.replace(reg,'$1')
				let strss = str.replace(regt,'$1')
				sdata.fileName = strss;
				let drl = 'lblsapp-h5/v2/upload/saveFile.json';
				reader.readAsDataURL(this.file);
				reader.onload = function(){
					var oreader = new FileReader();
					var image = new Image();
					image.src = this.result;
					image.onload = function(){
						that.canvas = document.createElement("canvas");
						that.ctx = that.canvas.getContext("2d");
						var r,expectWidth,base64,size = (inpt.files[0].size)/1024000;
						EXIF.getData(image,function(){
							r = EXIF.getTag(this,'Orientation')
						})
						if(size>1){
							//压缩图片大小
							base64 = that.compressImage(image,900,r)
						}else{
							base64 = image.src;
						}
						sdata.base64String = base64.split(',')[1];
						 util.ajax.post(drl, sdata).then(function(stats) {
							if (stats.data.code == '0') {
								that.photosucc=true;
								that.photoUrl = stats.data.res.msg;
								that.imgPreview(that.file);
							};

						}).catch(function(error) {
							console.log(error);
						})
					}
				}
			},
			//图片预览
			imgPreview(file) {  //图片预览函数
				let self = this;
				// 看支持不支持FileReader
				if (!file || !window.FileReader) return;
				if (/^image/.test(file.type)) {
					// 创建一个reader
					var reader = new FileReader();
					// 将图片将转成 base64 格式
					reader.readAsDataURL(file);
					// 读取成功后的回调
					reader.onloadend = function() {
						self.dataUrl = this.result;
					}
				}
			},
			//压缩文件
			compressImage(img,compressWidth,k){
				var self = this;
				var imgWidth = img.naturalWidth;
				var imgHeight = img.naturalHeight;
				var scale = imgWidth / imgHeight;
				var ctxImgHeight;
				if (k == 8) {
					ctxImgHeight = compressWidth * scale;
					self.canvas.width = compressWidth;
					self.canvas.height = ctxImgHeight;
					self.ctx.clearRect(0, 0, ctxImgHeight, compressWidth);
					self.ctx.fillStyle = "#fff";
					self.ctx.fillRect(0, 0, ctxImgHeight, compressWidth);
					self.ctx.rotate(270 * Math.PI / 180);
					self.ctx.drawImage(img, 0, 0, -ctxImgHeight, compressWidth);
				} else if (k == 6) {
					ctxImgHeight = compressWidth * scale;
					self.canvas.width = compressWidth;
					self.canvas.height = ctxImgHeight;
					self.ctx.clearRect(0, 0, ctxImgHeight, compressWidth);
					self.ctx.fillStyle = "#fff";
					self.ctx.fillRect(0, 0, ctxImgHeight, compressWidth);
					self.ctx.rotate(90 * Math.PI / 180);
					self.ctx.drawImage(img, 0, 0, ctxImgHeight, -compressWidth);

				} else if (k == 3) {
					ctxImgHeight = compressWidth / scale;
					self.canvas.width = compressWidth;
					self.canvas.height = ctxImgHeight;
					self.ctx.clearRect(0, 0, compressWidth, ctxImgHeight);
					self.ctx.fillStyle = "#fff";
					self.ctx.fillRect(0, 0, compressWidth, ctxImgHeight);
					self.ctx.rotate(180 * Math.PI / 180);
					self.ctx.drawImage(img, 0, 0, -compressWidth, -ctxImgHeight);
				} else {
					ctxImgHeight = compressWidth / scale;
					self.canvas.width = compressWidth;
					self.canvas.height = ctxImgHeight;
					self.ctx.clearRect(0, 0, compressWidth, ctxImgHeight);
					self.ctx.fillStyle = "#fff";
					self.ctx.fillRect(0, 0, compressWidth, ctxImgHeight);
					self.ctx.drawImage(img, 0, 0, compressWidth, ctxImgHeight);
				}
				var base64 = self.canvas.toDataURL("image/jpeg", 0.98);
				return base64;
			},
		}
	}
</script>

<style scoped>
	.container-wrapper{
		/* padding-top: 45px; */
	}
	.container-container-ios{
		padding-top: 65px;
	}
	.choose-type{
		line-height: 20px;
		font-size: 1.6rem;
		color: #212121;
	}
	.vux-divider{
		font-size: 1.6rem;
		color: #212121;
		padding: 20px 19.2%;
	}
	.default-reg{
		font-size: 0;
	}
	.item-selected{
		background: #ffffff url(../../assets/img/reference/select.png) no-repeat right top !important;
		background-size:28px 28px !important;
	}
	.add_photo{
		width: 100%;
		height: 48px;
		padding: 41px 0 14px 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.add_photo img{
		max-height: 48px;
	}
	.vux-checker-item{
		width: 44%;
		height: 130px;
		margin: 0 2% 0 4%;
		float: left;
		box-shadow: 0 0 8px 0 rgba(0,0,0,0.06);
		border-radius: 4px;
		background: #F5F5F5;
	}
	.vux-checker-item:nth-child(2){
		margin: 0 4% 0 2%
	}
	.auth_method{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 20px 0 10px 0;
		text-align: center;
	}
	.auth_method_img{
		height: 24px;
		margin-bottom: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.auth_method_img img{
		max-height: 24px;
	}
	.auth_method_title{
		font-size: 1.6rem;
		color: #212121;
		line-height: 16px;
	}
	.auth_method_content{
		font-size: 1.2rem;
		color: #808080;
		letter-spacing: 0;
		line-height: 20px;
	}
	.vux-checker-box:after{
		height: 0;
		overflow: hidden;
		clear: both;
		visibility: hidden;
		display: block;
		content: '';
	}
	.show_message{
		position: relative;
		width: 92%;
		background: #FFFFFF;
		margin: 15px auto;
		border-radius: 4px;
	}
	.show_message:before {
	    content: '';
	    position: absolute;
	    width: 10px;
	    height: 10px;
	    top: -5px;
	    right: 25%;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	    background-color: #fff;
	}
	.show_messheight{
		height: 160px;
	}
	.show_border:before {
	    left: 25%;
	}
	.add_text{
		font-size: 1.4rem;
		color: #808080;
		text-align: center;
		line-height: 17px;
	}
	.add_message{
	    width: 100%;
	    box-sizing: border-box;
	    border: 15px solid #fff;
	    background: #f5f5f5;
	}
	.add_message_text{
		width: 100%;
		box-sizing: border-box;
		padding: 10px 14px;
		font-size: 1.2rem;
		color: #808080;
		letter-spacing: 0;
		line-height: 20px;
	}
	.auth_pay{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 50px;
		text-align: center;
		line-height: 50px;
		font-size: 1.4rem;
		color: #FFFFFF;
		border: none;
		background: #F89721;
	}
	.auth_leave{
		position: fixed;
		bottom: 65px;
		width: 100%;
		left: 0;
		text-align: center;
		font-size: 12px;
		color: #808080;
		height: 17px;
		line-height: 17px;
	}
	.shadow{
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 999;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.60);
	}
	.shadow img{
		display: block;
		width: 80%;
		margin: 220px auto 0;
		background: #FFFFFF;
		border-radius: 4px;
		font-size: 0;
	}
	/*上传认证书*/
	.profileinfopanel-upload{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    z-index: 10;
  }
 .previewadd {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
 	/* z-index: 11; */
 }

</style>